<template>
  <div id="home">
    <h1 class="header">零信任登录</h1>
    <div class="token">
      {{ token }}

    </div>
    <div class="btn">
      <van-button style="margin:20px;" type="default" @click="copyText">复制口令</van-button>
      <van-button style="margin:20px;" type="warning" @click="privateKeyDialogShow = true">创建私钥</van-button>
      <van-button style="margin:20px;" type="primary" @click="verifyToken">重新生成</van-button>

    </div>
    <!-- 私钥生成开始 -->
    <van-dialog v-model:show="privateKeyDialogShow" title="私钥生成" @confirm="generatePrivateKey">
      <van-form>
        <van-cell-group inset>
          <van-field v-model="phonenum" name="手机号" label="手机号" placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]" />
          <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
        </van-cell-group>
      </van-form>
    </van-dialog>
    <!-- 私钥生成结束 -->
  </div>
</template>

<script setup>
import { getTokenApi, verifyTokenApi } from '../network/token';
import { onMounted, ref } from 'vue';
import { getLocalData, saveLocalData, copyToClipboard } from "../utils/utils"
import { signMessage, getPublicAddressByPrivateKey } from "../utils/web3utils"
import {showToast} from "vant"

const token = ref("")
const privateKey = ref("")
const publicKey = ref("")
const signatureMessage = ref("")
var privateKeyDialogShow = ref(false)

// 手机号
var phonenum = ref("")
// 用户名
var username = ref("")

const copyText = () => {
  showToast("复制成功")
  copyToClipboard(token.value)
}

// 验证token
const verifyToken = () => {
  getTokenApi().then(res => {
    token.value = res.data
    signatureMessage.value = signMessage(token.value, privateKey.value)
    verifyTokenApi(publicKey.value, signatureMessage.value).then(res => {
      console.log(res)
    })
  })
}

const stringToFixedLengthHex = (str) => {
  // 使用crypto模块中的createHash函数（Node.js）  
  const crypto = require('crypto');
  const hash = crypto.createHash('sha256').update(str).digest('hex');
  // SHA-256已经确保了是64个字符长度的16进制字符串  
  return hash;
}


// 生成私钥
const generatePrivateKey = () => {
  if (phonenum.value.length != 11 || username.value.length == 0) {
    showToast("手机号11位，用户名不为空")
    return
  }
  let pk = stringToFixedLengthHex(username.value + phonenum.value)
  saveLocalData("privateKey", pk, (res) => {
    console.log(res)
    verifyToken()
  })
}

onMounted(() => {

  // 准备数据
  getLocalData("privateKey", (pk) => {
    if (pk == null) {
      privateKeyDialogShow.value = true
    } else {
      privateKey.value = pk
      publicKey.value = getPublicAddressByPrivateKey(pk)
      verifyToken()
    }
  })


})
</script>

<style scoped>
#home {
  width: 100%;
  height: 100vh;
}

#home h1 {
  width: 50%;
  margin: 40px auto;
}

#home .token {
  width: 50%;
  font-size: 35px;
  font-weight: bolder;
  font-family: 'Courier New', Courier, monospace;
  margin: 100px auto;
}

#home .btn {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
}
</style>
